<template>
  <div class="w">
    <div class="info">
      <div class="title">欢迎登陆</div>
      <div class="form">
        <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
          <el-form-item prop="phone">
            <el-input
              v-model="loginForm.phone"
              clearable
              placeholder="请输入手机号"
              style="width: 300px"
              prefix-icon="iconfont icon-denglu"
              class="input"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" v-if="!loginMode">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              style="width: 300px"
              clearable=""
              type="password"
              prefix-icon="iconfont icon-tianchongxing-"
              class="input"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="loginMode" class="code">
            <div class="code_form">
              <div class="code_form_left">
                <el-input
                  v-model="loginForm.code"
                  placeholder="请输入验证码"
                  style="width: 210px"
                  clearable=""
                  prefix-icon="iconfont icon-tianchongxing-"
                  class="input"
                >
                </el-input>
              </div>
              <div class="code_form_right">
                <el-button type="text" size="mini" @click="sendCode" style="color: #334353; font-size: 15px">发送验证码</el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="loginBtn" v-if="!loginMode">
        <el-button class="button" type="primary" @click="login">
          <span v-if="!loading">登录</span>
          <span v-else>加载中</span>
        </el-button>
      </div>
      <div class="loginBtn" v-if="loginMode">
        <el-button class="button" type="primary" @click="loginWithCode">
          <span v-if="!loading">登录</span>
          <span v-else>加载中</span>
        </el-button>
      </div>
      <div class="fotter">
        <el-button class="left" type="text" style="font-size: 15px; color: #334353" @click="loginPhone" v-if="!loginMode">验证码登录</el-button>
        <el-button @click="loginPhoneBack" v-if="loginMode" type="text" style="font-size: 15px; color: #334353">密码登录</el-button>
        <el-button class="right" type="text" style="font-size: 15px; color: #334353" @click="lose">忘记密码</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 校验密码规则
    var checkPassword = (rule, value, cb) => {
      // 必须包含字母、数字、下划线的密码验证规则
      const regPassword = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/;

      if (regPassword.test(value)) {
        return cb();
      }
      cb(new Error('密码必须包含数字、字母、特殊符号'));
    };

    // 手机号验证规则
    var checkPhone = (rule, value, cb) => {
      const regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (regPhone.test(value)) {
        return cb();
      }
      cb(new Error('手机号不合法'));
    };
    return {
      loginForm: {
        // 密码登录输入框绑定的属性
        password: '',

        // 验证码登录输入框绑定属性
        phone: '',
        code: '',
      },
      //密码和用户名校验的绑定属性
      loginRules: {
        //用户名验证规则
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],

        //密码验证规则
        password: [
          { validator: checkPassword, trigger: 'blur' },
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],

        // 手机验证规则
        phone: [
          { validator: checkPhone, trigger: 'blur' },
          { required: true, message: '手机号不能为空', trigger: 'blur' },
        ],

        // 验证码规则
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { min: 4, max: 6, message: '长度在 4 到 6 个字符', trigger: 'blur' },
        ],
      },
      loginMode: true,
      //用于切换登录按钮的状态
      loading: false,
    };
  },

  created() {},

  methods: {
    // 验证码登录
    loginPhone() {
      this.loginMode = true;
      this.$refs.loginRef.resetFields();
    },
    loginPhoneBack() {
      this.loginMode = false;
      this.$refs.loginRef.resetFields();
    },
    // 密码登录
    login() {
      // 登录之前的预校验
      this.$refs.loginRef.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const { data: res } = await this.$http.post('user/login', this.loginForm);
          if (res.code == 1) {
            localStorage.setItem('userInfo', JSON.stringify(res.data));
            window.sessionStorage.setItem('token', res.data.token);
            this.$router.go(-1);
            this.$message.success('登陆成功');
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }
        }
      });
    },
    // 比较严证码是否正确
    async loginWithCode() {
      this.$refs.loginRef.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const { data: res } = await this.$http.post('user/loginWithCode', { phone: this.loginForm.phone, code: this.loginForm.code });
          if (res.code == 1) {
            localStorage.setItem('userInfo', JSON.stringify(res.data));
            window.sessionStorage.setItem('token', res.data.token);
            this.$router.go(-1);
            this.$message.success('登陆成功');
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }
        }
      });
    },
    // 发送验证码
    async sendCode() {
      const { data: res } = await this.$http.post('user/loginWithPhone', { phone: this.loginForm.phone });
      console.log(res);
      if (res.code == 1) {
        this.$message.success(res.data);
      } else {
        this.$message.error(res.msg);
      }
    },
    lose() {
      this.$router.push('/lose');
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #f5f5f5;
  .info {
    width: 300px;
    .title {
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 40px;
    }
    .form {
      text-align: center;
      .input {
        :deep(.el-input__inner) {
          background-color: #fff;
          border: none;
          border-radius: 8.53px;
          height: 50px;
        }
      }
    }
    .loginBtn {
      .button {
        margin-top: 20px;
        margin-bottom: 10px;
        width: 100%;
        border-radius: 8.53px;
        background-color: #4094fe;
        color: #ffffff;
        background-image: -webkit-linear-gradient(325.15deg, #3382fd -20.29%, #64c4fe 107.31%);
        background-image: linear-gradient(124.85deg, #3382fd -20.29%, #64c4fe 107.31%);
      }
    }
    .fotter {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.code_form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>